﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Newsletter Generator</title>
	<link rel="stylesheet" type="text/css" href="../public/css/global.css" media="all" />
	<link rel="stylesheet" type="text/css" href="../public/plugins/facebox/facebox.css" media="all" />
    <script type="text/javascript" src="../public/libs/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../public/libs/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="../public/libs/jquery.tmpl.js"></script>
    <script type="text/javascript" src="../public/libs/knockout-1.2.1.js"></script>
	<script type="text/javascript" src="../public/js/script.js"></script>
	<script type="text/javascript" src="../public/plugins/facebox/facebox.js"></script>
    <script id="rowImages" type="text/x-jquery-tmpl">
        <section class="image">
            <img src="${ imageUrl }" alt="${ imageName }" width="${ imageWidth }" height="${ imageHeight }" />
            <button data-bind="click: deleteMe">Delete</button>
        </section>
    </script>
    <script type="text/javascript">
    (function ($) {
            var model = [
                { imageName: "Archie", imageLink: "www.aurl.com", imageUrl: "/img/john.jpg", imageWidth: "500", imageHeight: "500", deleteMe: function () { viewModel.people.remove(this); } }, { imageName: "Andy", imageLink: "www.pukis.com.br", imageUrl: "/img/john.jpg", imageWidth: "500", imageHeight: "500", deleteMe: function () { viewModel.people.remove(this); } }   ];
         viewModel = { rows: ko.observableArray(model)}  ;
          
        
        function add() { 
        
        
            viewModel.rows.push({  
        
                    imageName: prompt("Nome", ""),
                    imageLink: prompt("Link", ""),
                    imageUrl: prompt("Url Imagem", ""),
                    imageWidth: "500",
                    imageHeight: "500",
                    deleteMe: function () { viewModel.rows.remove(this); }

        
                }); 
       } 
        
        ko.applyBindings(viewModel); 
        /*viewModel = {
            rows: ko.observableArray(model),
            displayButton: ko.observable(true),
            displayForm: ko.observable(false),
            showForm: function () {
                this.displayForm(true).displayButton(false);
            },
            hideForm: function () {
                this.displayForm(false).displayButton(true);
            },
            addPerson: function () {
                this.displayForm(false).displayButton(true).rows.push({
                    imageName: prompt("Nome", ""),
                    imageLink: prompt("Link", ""),
                    imageUrl: prompt("Url Imagem", ""),
                    imageWidth: "500",
                    imageHeight: "500",
                    deleteMe: function () { viewModel.rows.remove(this); }
                });
            },
            currentPage: ko.observable(0),
            pageSize: ko.observable(5),
            navigate: function (e) {
                var el = e.target;

                if (el.id === "next") {
                    if (this.currentPage() < ko.utils.unwrapObservable(this.totalPages()) - 1) {
                        this.currentPage(this.currentPage() + 1);
                    }
                } else {
                    if (this.currentPage() > 0) {
                        this.currentPage(this.currentPage() - 1);
                    }
                }
            }
        };

        //paging
        viewModel.totalPages = ko.dependentObservable(function () {
            return Math.ceil(ko.utils.unwrapObservable(this.people).length / this.pageSize());
        }, viewModel);

        viewModel.showCurrentPage = ko.dependentObservable(function () {
            if (this.currentPage() > this.totalPages()) {
                this.currentPage(this.totalPages() - 1);
            }
            var startIndex = this.pageSize() * this.currentPage();
            return this.people.slice(startIndex, startIndex + this.pageSize());
        }, viewModel);    

        viewModel.numericPageSize = ko.dependentObservable(function () {
            if (typeof (this.pageSize()) !== "number") {
                this.pageSize(parseInt(this.pageSize()));
            }
        }, viewModel);

        ko.applyBindings(viewModel);*/
    })(jQuery);    
    </script>
</head>
<body>
	<div id="general">
		<div class="wrapper">
			<div id="header" class="clearfix">
				<div id="logotype"><a href="javascript:void(0)"><img src="../public/images/logotype.jpg" alt="Newsletter Generator" /></a></div>
				<div id="clientname">Reference <a href="javascript:void(0)" class="visit">Visitar o site</a></div>
			</div>
			<div id="main" class="clearfix">
				<div id="leftcol">
					<div id="options">
						<h2>Funções</h2>
						<ul>
							<li><a href="javascript:void(0)">Criar Newsletter</a></li>
							<li><a href="javascript:void(0)">Editar Newsletter</a></li>
						</ul>
					</div>
				</div>
				<div id="centercol">
					<div id="heading">
						<h1>Configurações da Newsletter</h1>
					</div>
					<label for="newsletterWidth">Largura
						<input type="text" name="newsletterWidth" id="newsletterWidth" />
					</label>
					<div id="widther" data-bind="template: { name: 'rowImages' }">

					</div>
					<div id="tollsbar">
						<div id="addrow" class="newsletterrow" href="javascript:void(0)" onclick="add()">ADD A NEW ROW</div>
						<div id="generate" class="newsletterrow" href="javascript:void(0)">GERAR XHTML</div>

					</div>
					<div id="additembox">
						<a id="addimg" class="newsletterrow" href="javascript:void(0)">addImage</a>
						<a id="addpdt" class="newsletterrow" href="javascript:void(0)">addProduto</a>
						<a id="addtxt" class="newsletterrow" href="javascript:void(0)">addText</a>
					</div>
				</div>
			</div>
			<div id="footer">
				
			</div>
		</div>
	</div>
</body>
</html>